
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>MeteoControl WiFi Station</title>

    <!-- Bootstrap core -->
    <link href="bootstrap.css" rel="stylesheet">
	<script src="jquery.js"></script>
	<style>
		.main { font-size: 63px; }
	</style>
	
    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>

  <body>

    <div class="container">
      <div class="header">
        <nav>
          <ul class="nav nav-pills pull-right">
            <li role="presentation"><a href="/">Home</a></li>
            <li role="presentation" class="active"><a href="/config">Configuration</a></li>
						<li role="presentation"><a href="/api">API</a></li>
          </ul>
        </nav>
        <h3 class="text-muted">MeteoControl</h3>
      </div>
	  
	  <div class="row">
		<h2>&nbsp;</h2>
		<div class="col-xs-offset-2 col-xs-8">
			<!-- Network config -->
			<div>
			  <div class="panel panel-default">
				<div class="panel-heading">
				  <h3 class="panel-title">Network</h3>
				</div>
				<div class="panel-body">
				  <form method="POST">
					  <div class="form-group">
						<label>Name</label>
						<input type="text" name="SSID" class="form-control" placeholder="Enter SSID" value="{SSID}">
					  </div>
					  <div class="form-group">
						<label for="exampleInputPassword1">Password</label>
						<input type="password" name="Password" class="form-control" placeholder="Password">
					  </div>
					  <button type="submit" class="btn btn-success">Save network</button>
					  <button type="cancel" class="btn btn-link">Cancel</button>
					</form>
				</div>
			  </div>
			</div>
			
			<!-- Sensor adjustment config -->
			<div>
			  <div class="panel panel-default">
				<div class="panel-heading">
				  <h3 class="panel-title">Adjustments and sensor corrections</h3>
				</div>
				<div class="panel-body">
				  <form method="POST">
					  <div class="form-group">
						<label for="exampleInputEmail1">Temperature adjustment, &#x00B1; &deg;C</label>
						<input type="text" name="T" class="form-control" value="{T}">
					  </div>
					  <div class="form-group">
						<label for="exampleInputPassword1">Humidity adjustment, &#x00B1; %</label>
						<input type="text" name="RH" class="form-control" value="{RH}">
					  </div>
					  <div class="form-group">
						<label for="exampleInputPassword1">Local time, &#x00B1; hours from GMT</label>
						<input type="text" name="TZ" class="form-control" value="{TZ}">
					  </div>
					  <button type="submit" class="btn btn-success">Save correction</button>
					  <button type="cancel" class="btn btn-link">Cancel</button>
					</form>
				</div>
			  </div>
			</div>
			
			<!-- Trigger config -->
			<div>
			  <div class="panel panel-default">
				<div class="panel-heading">
				  <h3 class="panel-title">Sensor automatic trigger</h3>
				</div>
				<div class="panel-body">
				  <form method="POST">
						<div class="form-group">
							<div class="radio">
								<label><input type="radio" name="Trigger" value="0">Disabled</label>
							</div>
							<div class="radio">
								<label><input type="radio" name="Trigger" value="1">By Temperature</label>
							</div>
							<div class="radio">
								<label><input type="radio" name="Trigger" value="2">By Humidity</label>
							</div>
							<script>$( document ).ready( ($("input:radio[name=Trigger]"))[ {Trigger} ].click() )</script>
						</div>
						
						<fieldset>
							<legend>Value range</legend>
							<div class='row'>
								<div class='col-sm-4'>
										<div class='form-group'>
												<label>Minimum</label>
												<input type="text" name="RMin" class="form-control" value="{RMin}">
										</div>
								</div>
								<div class='col-sm-4'>
										<div class='form-group'>
												<label>Maximum</label>
												<input type="text" name="RMax" class="form-control" value="{RMax}">
										</div>
								</div>
							</div>
							<span id="helpBlock" class="help-block">* The trigger will fire when the value is less than the minimum or greater than the maximum</span>
						</fieldset>
					  <button type="submit" class="btn btn-success">Save trigger</button>
					  <button type="cancel" class="btn btn-link">Cancel</button>
					</form>
				</div>
			  </div>
			</div>
			
		</div>
      </div>

    </div> <!-- /container -->
  </body>
</html>
